<template>
	<div>
		<template v-if="column.type == 'jsonlist' || column.type == 'preview'  || column.type=='autopreview'">
			<x-json v-if="column.type == 'jsonlist'" :widget=" column" v-model="viewModel" :formField="column.jsonFields"></x-json>
			<x-preview v-if="column.type  == 'preview'" :keyValues="viewModel"></x-preview>
			<x-auto-preview style="margin-left: -100px;" v-if="column.type  == 'autopreview'" :viewModel="viewModel" :topValue="false"></x-auto-preview>
		</template>
		<el-form-item :label="column.name" :prop="column.field" class="from-item" v-if="async && column.type !== 'hidden'&&column.type !== 'autopreview' &&  column.type !== 'preview' && column.type !== 'jsonlist'">
			<template v-if="column.type == 'label'">
				<x-enum v-if="column.columnStyle===2" :type='column.dataSource' :value='dataModel'></x-enum>
				<x-autoconfig v-else-if="column.columnStyle===13" :type='column.dataSource' v-model='dataModel'></x-autoconfig>
				<x-grade v-else-if="column.columnStyle===9" :id="dataModel" v-model="dataModel"></x-grade>
				<label v-else>{{ dataModel }}</label>
			</template>
			<template v-if="column.type == 'checkbox'" x-verify="已验证">
				<x-checkbox v-model="viewModel" :apiUrl="column.dataSource"></x-checkbox>
			</template>
			<template v-if="column.type == 'radiobutton'" x-verify="已验证">
				<x-radio v-model="viewModel" :apiUrl="column.dataSource"></x-radio>
			</template>
			<template v-if="column.type == 'textbox'" x-verify="已验证">
				<el-input v-model="viewModel" :placeholder="column.placeholder" :value="column.value"></el-input>
			</template>
			<template v-if="column.type == 'passwordnumber'" x-verify="已验证">
				<el-input type="password" maxlength="6" v-model="viewModel" :placeholder="column.placeholder" :value="column.value"></el-input>
			</template>
			<template v-if="column.type == 'username'" x-verify="已验证">
				<x-username v-model="viewModel" :placeholder="column.placeholder"></x-username>
			</template>
			<template v-if="column.type == 'textarea'" x-verify="已验证">
				<el-input type="textarea" :rows="5" v-model="viewModel" :placeholder="column.placeholder"></el-input>
			</template>
			<template v-if="column.type == 'dropdownlist'" x-verify="已验证">
				<x-select v-model="viewModel" :apiUrl="column.dataSource"></x-select>
			</template>
			<template v-if="column.type == 'switch'" x-verify="已验证">
				<el-switch v-model="viewModel"> </el-switch>
			</template>
			<template v-if="column.type == 'numberic'" x-verify="已验证">
				<el-input-number v-model="viewModel" :min="0" :step="column.step" controls-position="right"></el-input-number>
			</template>
			<template v-if="column.type == 'decimal'" x-verify="已验证">
				<el-input-number v-model="viewModel" :min="0" :precision="$ala.baseConfig().step" :step="(1 / Math.pow(10, $ala.baseConfig().step))" controls-position="right"></el-input-number>
			</template>
			<template v-if="column.type == 'image'">
				<x-select-image v-model="viewModel" :count="Number(column.mark)"></x-select-image>
			</template>
			<template v-if="column.type == 'multipictureImage'||column.type === '0'">
				<x-multipicture-image v-model="viewModel"></x-multipicture-image>
			</template>
			<template v-if="column.type == 'vedio'">
				<x-video-select v-model="viewModel" :count="Number(column.mark)"></x-video-select>
			</template>
			<template v-if="column.type == 'audio'">
				<x-audio-select v-model="viewModel" :count="Number(column.mark)"></x-audio-select>
			</template>
			<template v-if="column.type === 'relationtags'" x-verify="已验证:标签选择(选择多个)">
				<x-relation-select :type="column.dataSource" :label="column.name" :multiple="true" v-model="viewModel"></x-relation-select>
			</template>
			<template v-if="column.type === 'relationclasssingle'" x-verify="已验证:分类选择(选择单个)">
				<x-relation-select :type="column.dataSource" :label="column.name" :multiple="false" v-model="viewModel"></x-relation-select>
			</template>
			<template v-if="column.type === 'relationclass'" x-verify="已验证:分类选择(选择多个)">
				<x-relation-tree :type="column.dataSource" :label="column.name" v-model="viewModel" :multiple="true"></x-relation-tree>
			</template>
			<template v-if="column.type == 'dataselect'" x-verify="实体数据选择(单选)">
				<x-data-select :widget="column" v-model="viewModel" :type="column.dataSource" :tag="column.placeHolder" :title="column.name" :field="column.mark"></x-data-select>
			</template>
			<template v-if="column.type == 'dataselectmultiple'" x-verify="实体数据选择(多选)">
				<x-data-multiple :widget="column" v-model="viewModel" :type="column.dataSource" :tag="column.placeHolder" :title="column.name" :field="column.mark"></x-data-multiple>
			</template>
			<template v-if="column.type == 'datepicker'">
				<el-date-picker v-model="viewModel" type="datetime" :placeholder="column.placeholder" :start-placeholder="column.startPlaceholder" :end-placeholder="column.endPlaceholder" :readonly="column.readonly" :editable="column.editable" :clearable="column.clearable"
					:value-format="column.timestamp ? 'timestamp' : column.format" :format="column.format" :style="{ width: column.width }">
				</el-date-picker>
			</template>
			<template v-if="column.type == 'rate'">
				<el-rate v-model="viewModel" :max="column.max" :allow-half="column.allowHalf"></el-rate>
			</template>
			<template v-if="column.type == 'color'">
				<el-color-picker v-model="viewModel" :show-alpha="column.showAlpha"></el-color-picker>
			</template>
			<template v-if="column.type == 'slider'">
				<el-slider v-model="viewModel" :min="column.min" :max="column.max" :step="column.step" :show-input="column.showInput" :range="column.range" :style="{ width: column.width }"></el-slider>
			</template>
			<template v-if="column.type == 'icon'">
				<x-icon-input :icondata="dataModel"></x-icon-input>
			</template>
			<template v-if="column.type == 'fileuploder'">
				<x-upload v-model="viewModel"></x-upload>
			</template>
			<template v-if="column.type == 'markdown'">
				<x-markdown v-model="viewModel"></x-markdown>
			</template>
			<template v-if="column.type == 'hidden'">
				
				<el-input v-model="viewModel" placeholder="请输入内容" type="hidden"></el-input>
			</template>
			<template v-if="column.type == 'provincedroplist'">
				<x-city-picker v-model="viewModel" :introHtml="column.helpBlock" :requiredFool="column.required" type="provincedroplist" />
			</template>
			<template v-if="column.type == 'citydroplist'">
				<x-city-picker v-model="viewModel" :introHtml="column.helpBlock" :requiredFool="column.required" type="citydroplist" />
			</template>
			<template v-if="column.type == 'countydroplist'||column.type == 'region'">
				<x-city-picker v-model="viewModel" :introHtml="column.helpBlock" :requiredFool="column.required" type="countydroplist" />
			</template>
			<template v-if="column.type == 'editor'">
				<div class="editor-box">
					<x-editor v-model="viewModel"></x-editor>
				</div>
			</template>
			<template v-if="column.type == 'password'">
				<el-input v-model="viewModel" type="password" password :placeholder="column.placeholder"></el-input>
			</template>
			<template v-if="column.type == 'timepicker'">
				<el-time-picker v-model="viewModel" type="time" placeholder="选择时间">
				</el-time-picker>
			</template>
			<template v-if="column.type == 'datetimerang'" x-verify="已验证:时间范围">
				<x-datetime-range v-model="viewModel" placeholder="选择时间访问">
				</x-datetime-range>
			</template>
			<template v-if="column.type == 'imagepreview'" x-verify="已验证:时间范围">
				<x-preview-image :images="viewModel"></x-preview-image>
			</template>
			<template v-if="column.type == 'maplocation'">
				<x-map-select v-model="viewModel"></x-map-select>
			</template>
			<template v-if="column.type == 'timerang'">
				<x-select-time v-model="viewModel"></x-select-time>
			</template>
			<template v-if="column.type == 'filemultipleuploder'">
				<x-multifile-upload v-model="viewModel"></x-multifile-upload>
			</template>
			<div class="help-back" v-html="column.helpBlock" v-if="column.type !== 'x-Json' && column.type !== 'area'&&column.helpBlock"></div>
		</el-form-item>
	</div>
</template>

<script>
	import ala from 'ala'
	export default {
		model: {
			prop: 'dataModel',
			event: 'change'
		},
		props: {
			column: {},
			currentModel: {}, // 当前输入的ViewModel，监听客户输入
			value: {},
			dataModel: {},
			usercode: {}
		},
		data() {
			return {
				viewModel: this.value,
				async: false
			}
		},
		mounted() {
			this.init().then(() => {
				this.async = true
			})
		},
		methods: {
			async init() {
				if (this.dataModel) {
					this.viewModel = this.dataModel
				}
			}
		},
		watch: {
			viewModel: {
				deep: true,
				handler(val) {
					this.$emit('change', this.viewModel)
					this.$emit('formItemChangeValue', this.column, this.viewModel) // 表单联动处理
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	@import "./style.scss";
</style>